<template>
  <div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>病患就珍</span>
        </div>
        <!--搜索-->
       <el-form :inline="true"  :model="tableData" class="demo-form-inline" style="padding-right: -17px;padding: 0px 20px;">
  <el-form-item label="名称" prop="patientName">
    <el-input v-model="tableData.patientName" placeholder="请输入患者名称"></el-input>
  </el-form-item>
  <el-form-item label="患者年龄" prop="age">
      <el-input v-model="tableData.age" placeholder="请输入患者年龄"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit('getDrug')">搜索</el-button>
  </el-form-item>
        <el-button style="margin-left: 330px;" @click="addPatient"  type="success">新增住院人员</el-button>
</el-form>  

<!--表格-->
  <el-table :data="patient" >
    <el-table-column fixed prop="id" label="主键" width="100"></el-table-column>
    <el-table-column prop="patient.patientName" label="患者名称" width="100"></el-table-column>
    <el-table-column prop="patient.age" label="患者年龄" width="100"></el-table-column>
    <el-table-column prop="cost" label="住院费用" width="100"></el-table-column>
    <el-table-column prop="patient.patientPhone" label="电话号码" width="150"></el-table-column>
    <el-table-column prop="roomNumber" label="房间号" width="150"></el-table-column>
    <el-table-column prop="doctor.doctorName" label="医生" width="100"></el-table-column>
    <el-table-column prop="subjects.subjectName" label="病课" width="100"></el-table-column>
    <el-table-column prop="remark" label="备注" width="150"></el-table-column>
      <el-table-column fixed="right" label="操作"  width="200">
      <template slot-scope="scope">         
        <el-button @click.native="updatePatient(scope.row.id)" type="text" size="small">
         <i class="el-icon-plus">修改</i>
        </el-button>
            <el-button @click.native="deleteRow(scope.row.patient.patientName,scope.row.id)" type="text" size="small">
         <i class="el-icon-delete-solid">删除</i>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.currentPage"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="tableData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
  </div>
    </el-card>

<!--弹出修改页面框-->
    <el-dialog title="患者住院信息" :visible.sync="update" width="50%"  >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="名称">
    <el-input v-model="formInline.patientName" placeholder="患者名称"></el-input>
  </el-form-item>
  <el-form-item label="电话">
   <el-input v-model="formInline.patientPhone"  placeholder="患者电话号码"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="formInline.patientStatus" placeholder="请选择就珍部门" style="display: block;">
        <el-option :value="1" label="预约状态">预约状态</el-option>
        <el-option :value="2" label="就珍状态">就珍状态</el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="年龄">
   <el-input v-model="formInline.age" placeholder="患者年龄"></el-input>
  </el-form-item>
  <el-form-item label="医生">
   <el-select v-model="formInline.doctorId" placeholder="请选择就珍医生" style="display: block;">
      <el-option v-for="d in doctor" :key="d.doctorId" :value="d.doctorId" :label="d.doctorName"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="费用">
   <el-input v-model="formInline.cost" placeholder="请输入住院费用"></el-input>
  </el-form-item>

   <el-form-item label="房间号">
   <el-input v-model="formInline.roomNumber" placeholder="请输入房间号"></el-input>
  </el-form-item>

     <el-form-item label="备注">
   <el-input v-model="formInline.remark" placeholder="备注"></el-input>
  </el-form-item>

   <el-input style="margin-bottom:15px;width: 80%;"
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="诊断结果"
  v-model="formInline.diagnosis">
</el-input>
  <br>
  <el-form-item>
    <el-button type="primary" @click="onSubmitUpdate">修改患者信息</el-button>
  </el-form-item>
</el-form>
    </el-dialog>

<!--弹出增加药品页面框--> 
<el-dialog title="添加患者住院信息" :visible.sync="addKapian" width="40%"  >
      <el-form  :model="addPatientFrom" status-icon ref="addPatientFrom" :rules="rules" label-width="100px" class="demo-form-inline"  >
        <el-form-item label="患者名称" prop="patientName">
    <el-input v-model="addPatientFrom.patientName" placeholder="请输入患者名称"></el-input>
  </el-form-item>
  
  <el-form-item label="电话号码" prop="patientPhone">
   <el-input v-model="addPatientFrom.patientPhone"  placeholder="请输入患者手机号码"></el-input>
  </el-form-item>

    <el-form-item label="患者年龄" prop="age">
   <el-input v-model="addPatientFrom.age"  placeholder="请输入患者年龄"></el-input>
  </el-form-item>
  
  <el-form-item label="患者状态" prop="patientStatus">
    <el-select v-model="addPatientFrom.patientStatus" placeholder="请选择" style="display: block;">
      <el-option :value="1" label="挂号状态"></el-option>
      <el-option :value="2" label="就珍状态"></el-option>
  </el-select>
  </el-form-item>
  
  <el-form-item label="就诊部门" prop="patientDepartmentId">
    <el-select v-model="addPatientFrom.patientDepartmentId" placeholder="请选择就珍部门" style="display: block;" @change="blurDepattment">
      <el-option v-for="d in departmentList" :key="d.departmentId" :value="d.departmentId" :label="d.departmentName"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="就诊科目" prop="patientSubjectId">
    <el-select  v-model="addPatientFrom.patientSubjectId" placeholder="请选择就诊科目" style="display: block;">
      <el-option v-for="d in subjects" :key="d.subjectId" :value="d.subjectId" :label="d.subjectName"></el-option>
    </el-select>
  </el-form-item>

    <el-form-item label="就诊医生" prop="doctorId">
    <el-select  v-model="addPatientFrom.doctorId" placeholder="请选择就诊科目" style="display: block;">
      <el-option v-for="d in doctor" :key="d.doctorId" :value="d.doctorId" :label="d.doctorName"></el-option>
    </el-select>
  </el-form-item>


  <el-form-item label="住院费用" prop="cost">
   <el-input v-model="addPatientFrom.cost"  placeholder="请输入住院费用"></el-input>
  </el-form-item>

<el-form-item label="房间号" prop="roomNumber">
   <el-input v-model="addPatientFrom.roomNumber"  placeholder="请输入房间号"></el-input>
  </el-form-item>

 <el-form-item label="住院时间" >
                        <el-date-picker style="width: 100%;"
                        v-model="addPatientFrom.data"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="请输入住院日期"
                        end-placeholder="请输入出院日期">
                </el-date-picker>
  </el-form-item>


   <el-form-item label="诊断结果" prop="diagnosis">
   <el-input v-model="addPatientFrom.diagnosis"  placeholder="请输入患者手机号码"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onHospitalizedListAdd">确认</el-button>
     <el-button @click="cancel">取消</el-button>
  </el-form-item>

      </el-form>
</el-dialog>



  </div>
</template>

<script>
 export default {
    data() {
      return {
        tableData: {
          patientName: "",
          age:"",
          currentPage:1,
          pageSize:5
        },
        value: '',
        patient:[
          
        ],
        departmentList:[

        ],
        subjectMsg:[

        ],
        subjects:[

        ],
        doctor:[

        ],
        totals:0,
        update:false,
        addKapian:false,
         formInline: [
              
         ],
         addPatientFrom:{
           patientName:'',
           patientPhone:'',
           age:'',
           patientStatus:'',
           patientDepartmentId:'',
           diagnosis:'',
           currentDate:'',
           cost:'',
           roomNumber:'',
           data:'',
           doctorId:'',
           startTime:'',
           endTime:''
         },
         rules:{
           patientName:[
            {  required: true, message: '请输入患者名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
           ],
           patientPhone:[
             {  required: true, message: '请输入患者号码', trigger: 'blur' },
            { min: 11, max: 11, message: '电话号码必须为11位数字', trigger: 'blur' },
           ],
           age:[
             {  required: true, message: '请输入患者年龄', trigger: 'blur' },
           ],
           patientStatus:[
             {  required: true, message: '请输入患者状态', trigger: 'blur' },
           ],
            patientDepartmentId:[
            {  required: true, message: '请输入就珍部门', trigger: 'blur' },
          ],
          diagnosis:[
             {  required: true, message: '请输入诊断结果', trigger: 'blur' },
          ]
         }
      }
    },
    methods: {
       //科目失去焦点事件
      blurDepattment(){
          //发送请求(科目信息)
           this.$axios.get("/api/biz/subjects/list",{params:{'subjectId':this.addPatientFrom.patientDepartmentId}}).then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.subjects=data.data;       
                }else{
                    this.$message.error(data.error);
                }
           });
           
      },
      //取消
      cancel(){
        this.addKapian=false;
      },
      //查询药品信息
      onSubmit() {
       this.getHospitalizedList();
      },
      //点击查询患者信息方法
      getHospitalizedList(){
      //发送请求(患者信息)
           this.$axios.post("/api/biz/hospitalization/list",this.tableData).then(res=>{
                let data=res.data;
                if(data.code==0){
                  this.patient=data.data.data;
                  this.totals=data.data.totals;
                }else{
                  this.$message.error(data.msg);
                }
           });
      },
      //根据id查看患者住院信息
      updatePatient(id){
        this.update=true;
         this.doctorList();
          //发送请求(药品信息)
           this.$axios.get("/api/biz/hospitalized/selectID/"+id).then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.formInline=data.data;
                }else{
                    this.$message.error(data.error);
                }
           });
      },
      //修改患者住院信息
      onSubmitUpdate(){
           this.$axios.post("/api/biz/hospitalization/modify",this.formInline).then(res=>{
                let data=res.data;
                if(data.code==0){
                       this.$message.success(data.msg);
                       this.update=false;
                }else{
                        this.$message.success(data.msg);
                }
           });
      },


      //设置每页多少条
      handleSizeChange(pageSize){
       this.tableData.pageSize=pageSize;
              this.getHospitalizedList();
      },
      //下一页
      handleCurrentChange(currentPage){
       this.tableData.currentPage=currentPage;
          this.getHospitalizedList();
      },
      //跳转增加患者信息
      addPatient(){
         this.addKapian=true;
         debugger;
         this.doctorList();
         this.departmentListt();

      },
      //增加患者信息
      onHospitalizedListAdd(){
        this.addPatientFrom.startTime=this.addPatientFrom.data[0];
            this.addPatientFrom.endTime=this.addPatientFrom.data[1];
           //发送请求(药品规格)
            this.$axios.post("/api/biz/hospitalization/add",this.addPatientFrom).then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.$message.success(data.msg);
                    this.addKapian=false;
                    this.addPatientFrom=[];
                }else{
                    this.$message.error(data.data);
                }
           });
      },
      //删除患者住院信息
      deleteRow(patientName,id){
       this.$confirm('此操作将删除'+patientName+'患者, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {    
          this.$axios.delete("/api/biz/hospitalization/del/"+id).then(res=>{
            let data=res.data;
                if(data.code==0){
                  this.$message.success(data.msg);
                  this.getHospitalizedList();
                }else{
                  this.$message.success(data.msg);
                }
           });
        })
      },
      //获取患者科目
      patientSubject(){
        //发送请求(科目))
            this.$axios.post("/api/biz/patient/subjects").then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.subjectMsg=data.data;
                }else{
                    this.$message.error(data.msg);
                }
           });
      },
      //获取医生
       doctorList(){
        //发送请求(科目))
            this.$axios.post("/api/biz/doctor/list").then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.doctor=data.data;
                }else{
                    this.$message.error(data.msg);
                }
           });
      },
      //获取就珍部门信息
      departmentListt(){
         //发送请求(部门)
            this.$axios.post("/api/biz/department/list").then(res=>{
                let data=res.data;
                if(data.code==0){
                    this.departmentList=data.data;
                }else{
                    this.$message.error(data.msg);
                }
           });
      },
    },
    //自动加载
     mounted() {
         //发送请求(患者信息)
          this.getHospitalizedList();

    },
  }
</script>

<style scoped>

.el-input--suffix .el-input__inner {
    padding-right: 20px;
}
.el-pagination {
    margin: 30px 0px;
}
.el-table th.el-table__cell>.cell {
    text-align: center;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {

    text-align: center;
}
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
      width: auto;
      margin-top: 0;

  }


</style>